<template>
  <div>
    <NavBar
      :flag="flag"
      :text="text"
      :flag2="flag2"
      :text2="text2"
      @share="share"
    ></NavBar>
    <MainBar :url="MainList[flagFooter]"></MainBar>
    <FooterBar
      :list="list"
      :flagFooter="flagFooter"
      @changeMain="fn"
    ></FooterBar>
  </div>
</template>
<script>
import NavBar from "./PageChange/NavBar.vue";
import MainBar from "./PageChange/MainBar.vue";
import FooterBar from "./PageChange/FooterBar.vue";
export default {
  components: {
    NavBar,
    MainBar,
    FooterBar,
  },
  data() {
    return {
      flag: true,
      text: "御剑乘风来,除魔天地间!",
      flag2: true,
      text2: "分享",
      list: [
        {
          id: 1,
          text: "YOYO滴面试题",
        },
        {
          id: 2,
          text: "AI分类",
        },
        {
          id: 3,
          text: "VUEUSE",
        },
        {
          id: 4,
          text: "不知道啥名好",
        },
      ],
      flagFooter: 0,
      MainList: [
        "https://www.yuque.com/silence1224/zvw0fi/qskx1m#vue",
        "https://ai-bot.cn/",
        "https://vueuse.org/",
        "http://fanyouf.gitee.io/u1word/#/h5",
      ],
    };
  },
  created() {},
  computed: {},
  methods: {
    share() {
      alert(this.text2);
    },
    fn(index) {
      this.flagFooter = index;
    },
  },
};
</script>
<style lang='less' scoped>
</style>
